<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" type="image/x-icon" href="http://mojinshi.com/propertyMS/angular/assets/images/logo.jpg">
    <title>临时密码</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        #wrap {
            width: 100%;
            height: 100%;
            background: url(../images/background.jpg) no-repeat left bottom;
            background-size: 100%;
        }

        .title {
            padding: 30px 30px 10px 30px;
            padding-top: 10px;
        }

        .body {
            padding: 10px 30px 20px 30px;
        }

        .info {
            padding: 10px 30px 30px 30px;
            font-size: 13px;
            color: #795548;
        }

        .password {
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .password>div {
            width: 45px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            float: left;
            border: 1px solid #FFD300;
            border-radius: 5px;
            box-shadow: 0 0 3px #FFD304;
            font-size: 25px;
            font-weight: 600;
        }
        .topTilet{
            text-align: center;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="wrap">
       <h3 class="topTilet">临时密码</h3>
        <div class="title">
            您好!
        </div>
        <div class="body">
            <strong id="projectName">XXXXXX</strong>住户<strong id="name">XXXXXX</strong>,于 <strong id="startTime">XX</strong>分享了临时密码，该密码24小时有效。请您在<strong
                id="expiredTime">XX</strong>前使用。
        </div>
        <div class="body">
            使用位置：<strong id="location">XXXXXX</strong>
        </div>
        <div class="info">
            注意：临时密码只有一次使用权限，使用后立即失效！
        </div>
        <div class="password">
            <div id="password1">*</div>
            <div id="password2">*</div>
            <div id="password3">*</div>
            <div id="password4">*</div>
            <div id="password5">*</div>
            <div id="password6">*</div>
        </div>
    </div>
</body>

</html>
<script>
    function $(id) {
        return document.getElementById(id)
    }
    var url = decodeURI(window.location.search);
    //定义一个空对象
    var obj = {};
    url = url.split('?')
    url.forEach(element => {
        var a = element.split('=')
        obj[a[0]] = a[1]
    });
    $('projectName').innerHTML = obj.projectName
    $('location').innerHTML = obj.location
    $('name').innerHTML = obj.name
    $('startTime').innerHTML = obj.startTime.slice(0, 16)
    $('expiredTime').innerHTML = obj.expiredTime.slice(0, 16)
    $('password1').innerHTML = obj.password.slice(0, 1)
    $('password2').innerHTML = obj.password.slice(1, 2)
    $('password3').innerHTML = obj.password.slice(2, 3)
    $('password4').innerHTML = obj.password.slice(3, 4)
    $('password5').innerHTML = obj.password.slice(4, 5)
    $('password6').innerHTML = obj.password.slice(5, 6)

    console.log(obj);
</script>